<template>
  <div class="loginBox">
    <div class="header" v-if="type==0">
      重置密码
    </div>
    <div class="header" v-else>
      设置密码
    </div>
    <div class="loginForm">
      <group>
        <x-input title="输入新密码" v-model="obj.password.value" name="mobile" placeholder="输入新密码（6~12位）" :min="6" :max="12"
                 @on-change="inputPassword"
                 type="password"></x-input>
      </group>

      <group>
        <x-input title="确认新密码" v-model="obj.confpassword.value" placeholder="确认新密码（6~12位）" :min="6" :max="12" class="weui-vcode"
                 @on-change="inputConfPassword"
                 type="password">
          <!--<x-button slot="right" type="primary" plain="false"  mini>获取验证码</x-button>-->
        </x-input>
      </group>


      <div class="login" :class="obj.password.valid||obj.confpassword.valid?'disable-btn':''" @click="commit">确定</div>
    </div>
  </div>
</template>
<!--<script src="./resetPassword.js"></script>-->
<script>
  import md5 from 'js-md5';
  export default {
    name: "setPassword",
    components: {},
    data() {
      return {
        obj: {
          password: {
            value: '',
            valid: true
          },
          confpassword: {
            value: '',
            valid: true
          }
        },
        type: 0, //0重置密码 1设置密码
        isClick:true,
        flowId:null,
        phone:null
      }
    },
    methods: {
      inputPassword(val){
        if(val&&val.length>=6&&val.length<=12){
          this.obj.password.valid=false;
        }else{
          this.obj.password.valid=true;
        }
      },
      inputConfPassword(val){
        if(val&&val.length>=6&&val.length<=12){
          this.obj.confpassword.valid=false;
        }else{
          this.obj.confpassword.valid=true;
        }
      },
      commit(){
        console.log("isclic",this.isClick)
        if(this.isClick){
          if(this.obj.confpassword.valid==true||this.obj.password.valid==true){
            return;
          }
          if(this.obj.password.value==this.obj.confpassword.value){
            this.isClick=false;
            if(this.type==0){
              this.$ajax.post("user/forget/password", {flowId:this.flowId,phone:this.phone,password: md5(this.obj.password.value)}, (res) => {
                if(res.code==200){
                  this.$vux.toast.text("设置成功", 'middle');
                  setTimeout(()=>{
                    this.$router.go(-2)
                  },1000)
                }else{
                  this.$vux.toast.text(res.msg, 'middle');
                }
                setTimeout(()=>{
                  this.isClick=true;
                },1000)

              });
            }else{
              this.$ajax.post("user/set/password", {password: md5(this.obj.password.value)}, (res) => {
                if(res.code==200){
                  this.$vux.toast.text("密码设置成功", 'middle');
                  setTimeout(()=>{
                    if (this.$fromApp(this)){
                      this.$callJava({code:1007})
                    }
                  },2000)
                }else{
                  this.$vux.toast.text(res.msg, 'middle');
                }
                setTimeout(()=>{
                  this.isClick=true;
                },1000)

              });
            }

          }else{
            this.$vux.toast.text("两次输入的密码不一致，请重新设置", 'middle');
          }
        }

      },
      androidCallJs (str) {
        let obj = eval("("+str+")");
        if (obj&&obj.Authorization != '') {
          this.$storage.set('token',obj.Authorization);
        }
      }
    },
    mounted: function () {
      console.log("mounted")
      this.type=this.$route.query.type
      this.flowId=this.$route.query.flowId
      this.phone=this.$route.query.phone
      if(this.$route.query.from=="app"){
        window['androidCallJs'] = (val) => {
          this.androidCallJs(val)
        }
      }
    }
  }

</script>
<style lang="less" scoped>
  /*@import "./login.less";*/
  .disable-btn {
    opacity: 0.5;
  }

  .loginBox {
    background-color: #fff;
    position: absolute;
    width: 100%;
    height: 100%;

    .header {
      margin-left: .4rem;
      margin-top: .7rem;
      font-size: .44rem;
      font-family: PingFang-SC-Bold;
      font-weight: bold;
      color: rgba(51, 51, 51, 1);
      line-height: .56rem;
    }

    .loginForm {
      margin-top: 1.38rem;
      padding-right: .4rem;
      padding-left: .4rem;

      /deep/ .weui-cells {
        margin-top: 0;
        font-size: 0.32rem;
        line-height: 0px;
        .weui-cell {
          padding: 0.3rem 0rem;
        }

        .weui-input {
          color: #333;
          font-size: 0.3rem;
        }
      }

      /deep/ .weui-cells:before {
        display: none;
      }

      /deep/ .weui-cells:after {
        border-bottom: 1px solid rgba(235, 235, 235, 1);
      }

      /deep/ .weui-label {
        width: 1.67rem !important;
        display: inline-block;
        text-align: justify;
        text-align-last: justify;
        margin-right: .65rem;
        font-size: .32rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      /deep/ .weui-label:after {
        width:100%;
        display: inline-block;
        content: '';
      }

      /deep/ input::-webkit-input-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ input:-moz-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ input:-ms-input-placeholder {
        color: #ddd;
        font-size: 0.3rem;
      }

      /deep/ .weui-btn {
        border: 0px;
        color: rgba(253, 179, 118, 1);
        padding: 0px;
        font-size: .26rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
      }


      .login {
        margin-top: 1.2rem;
        background: rgba(82, 125, 217, 1);
        box-shadow: 0rem .18rem .35rem .0rem rgba(82, 125, 217, 0.15);
        border-radius: .46rem;
        padding: .3rem;
        text-align: center;
        font-size: .34rem;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
      }

    }
  }

</style>

